<template>
  <div>
    
    <div style="height:40px;background:white">
      <div class="block">
        时间&nbsp;
        <el-date-picker
          value-format="yyyy-MM"
          style="width:150px"
          size="mini"
          v-model="a.month"
          type="month"
          placeholder="选择月">
        </el-date-picker>
        
        &nbsp;&nbsp;陪护员 &nbsp;<el-input v-model="a.peihuyuan" placeholder="请输入陪护员" style="width:150px" size="mini"></el-input>
        &nbsp;&nbsp;状态 &nbsp;<el-select v-model="a.zhuangtai" placeholder="请选择" style="width:150px" size="mini">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="success" plain size="mini" @click="shaixuan">筛选</el-button>
      </div>
    </div>
    <div style="height:450px;background-color: white;">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="400px"
        >
        <el-table-column
          prop="orderTime"
          label="结算时间"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="escort.payee"
          label="陪护员"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop=""
          label="结算周期"
          width="80"
          align="center">
          月结
        </el-table-column>
        <el-table-column
          prop="serviceItem.price"
          label="订单总额（元）"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop=""
          label="提成"
          width="60"
          align="center">
          10%
        </el-table-column>
        <el-table-column
          prop="ticheng"
          label="结算金额（元）"
          width="120"
          align="center">
          
        </el-table-column>
        
        <el-table-column
          prop="escort.payee"
          label="收款人"
          width="70"
          align="center">
        </el-table-column>
        <el-table-column
          prop="escort.bank"
          label="开户行"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop="escort.card"
          label="银行卡号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="caozuo"
          label="操作"
          width="150"
          align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 1" @click="handleClick(scope.row)" type="text" size="small">结算</el-button>
            <span v-if="(scope.row.status != 1)&(scope.row.status != 99)">未完成</span>
            <span v-if="scope.row.status == 99">已结算</span>
          </template>
        </el-table-column>

      </el-table>
      <div class="block" style="text-align: right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
  </div>

    </div>
    
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>确定结算此单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok()">确 定</el-button>
      </span>
    </el-dialog>
  </div>

  
</template>

<script>
  export default {
    methods: {
      shaixuan(){
        console.log(this.a.month);
        console.log(this.a.peihuyuan);
        console.log(this.a.zhuangtai);
        this.$axios.post("http://localhost:7600/wallet/sx/",this.a).then(res => {
          this.res = res
          for(var i in res.data.data.list){
          this.res.data.data.list[i].ticheng = this.res.data.data.list[i].serviceItem.price*0.1
        }
          this.total=""
          this.tableData=this.res.data.data.list
            console.log(res);
        })

        
      },
      
      handleClick(row) {
        this.dialogVisible = true
        this.jiesuan = row
        console.log(row);
      },

      handleSizeChange(val) {
        this.handleSize = val
        this.$axios.get("http://localhost:7600/wallet/allcs/1/"+this.handleSize).then(res => {
        this.res = res
        for(var i in res.data.data.list){
          this.res.data.data.list[i].ticheng = this.res.data.data.list[i].serviceItem.price*0.1
        }
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        })
        console.log(`每页 ${val} 条`);
      },

      handleCurrentChange(val) {
        this.handleCurrent = val
        this.$axios.get("http://localhost:7600/wallet/allcs/"+this.handleCurrent+"/"+this.handleSize).then(res => {
        this.res = res
        for(var i in res.data.data.list){
          this.res.data.data.list[i].ticheng = this.res.data.data.list[i].serviceItem.price*0.1
        }
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      ok(){
        console.log(this.jiesuan);
        this.dialogVisible = false
        this.$axios.post("http://localhost:7600/wallet/ok",this.jiesuan).then(res => {
          
        this.res = res
        for(var i in res.data.data.list){
          this.res.data.data.list[i].ticheng = this.res.data.data.list[i].serviceItem.price*0.1
        }
        this.total=res.data.data.total
        this.tableData=res.data.data.list
        })

      }
    },
    mounted(){
      this.$axios.get("http://localhost:7600/wallet/allcs/1/5").then(res => {
        this.res = res
        for(var i in res.data.data.list){
          this.res.data.data.list[i].ticheng = this.res.data.data.list[i].serviceItem.price*0.1
        }
        this.total=this.res.data.data.total
        this.tableData=this.res.data.data.list
        })
    },

    data() {
      return {
        jiesuan:{},
        a:{
          month:'',
          zhuangtai:'0',
          peihuyuan:'',
        },
        dialogVisible: false,
        tableData: [],
        res:{},
        currentPage4: 1,
        handleSize:5,
        total:0,
        wallet:{
          order_time:"",
          order_id:"",
          technician:"",
          pay_type:"",
        },
        options: [{
          value: '1',
          label: '已结算'
        }, {
          value: '0',
          label: '未结算'
        }],
      }
    }
  }
</script>

<style>
  .el-main{
    background-color: #e5e9f2;
    height: 800px;
  }
</style>